<template>
	<div style="display: flex;flex-direction: column;" class="otherPage centreOfExcellence recruitmentInformation">
		<Header :selected="8"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover; ':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="3" :bgColor="bgColor">
		</Navigation>
		<div class="content" style="min-height: 600px;">
			<div class="content_bg" style="min-height: 600px;">
				<el-row>
					<el-col>
						<div class="recruitmentInfoJobName">
							{{data.now.jobName}}
						</div>
					</el-col>
					<el-col class="corporateNewsDetailDate">
					发布时间 :	{{data.now.publishTime}}
					</el-col>
					<el-col>
						<div class="xzfw">{{$t('salaryRange')}} ：{{data.now.salaryRange}}</div>
					</el-col>
					<el-col>
						<div class="gwcontent" v-html="data.now.content.setWrap()"></div>
					</el-col>
				</el-row>
				
				<el-row class="pageupOrNext" :gutter="10">
					<el-col :xs="24" :sm="12" :md="12" :lg="12">
						<div v-if="data.previous" @click="goToDetail(data.previous.id)"
							class="newsOtherTitle textAlignLeft">
							{{data.previous.titles?$t('previousArticle'):''}}{{data.previous.titles||''}}
				
						</div>
						<div v-else class="noOtherTitle textAlignLeft">{{$t('previousArticle')}}{{$t('noMoreTitle')}}
						</div>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12">
						<div v-if="data.next" @click="goToDetail(data.next.id)" class="newsOtherTitle textAlignRight">
							{{data.next.titles?$t('nextArticle'):''}}{{data.next.titles||''}}
						</div>
						<div v-else class="noOtherTitle textAlignRight">{{$t('nextArticle')}}{{$t('noMoreTitle')}}</div>
				
					</el-col>
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import Pagination from '../../../src/components/common/Pagination.vue'
	import {
		centreOfExcellenceMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination
		},
		data() {
			return {
				loading: true,
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: centreOfExcellenceMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('centreOfExcellence'),
						to: '/centreOfExcellence'
					},
					{
						label: this.$t('recruitmentInformation'),
						to: '/recruitmentInformation'
					}
				],
				data: {},
				types:'',
				classifyId:'',
			};
		},
		computed: {},

		onload() {},
		created() {},
		mounted() {
			this.id = this.$route.query.id;
			this.classifyId=this.$route.query.classifyId;
			this.types=this.$route.query.types;
			this.bindBg();
			this.getRecruitPublishDetail();


		},
		methods: {
			/**
			 * 获取招聘信息顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.zpXxBgImage(params).then(res => {
					this.bgImg = res.data.fileUrl
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});
			},
			goToDetail(id) {
						this.id=id;
						this.getRecruitPublishDetail();
					},
			/**
			 * 获取招聘简章详细信息
			 */
			getRecruitPublishDetail() {
				let params = {
					"recruitPublishId": this.id,
					"types":this.types,
					'classifyId':this.classifyId
				};
				let that = this;
				that.$request.getRecruitPublishDetail(params).then(res => {
					this.data = res.data;
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});
			},

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/centreOfExcellence/centreOfExcellence.css");

	.recruitmentInfoJobName {
		height: 62px;
		width: 100%;
		line-height: 62px;
		text-align: center;
		background: #F3F3F3;
		font-size: 1.3rem;
		border-radius: 6px;
	}

	.corporateNewsDetailDate {
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-weight: 400;
		color: #999999;
		line-height: 33px;
	}

	.xzfw {
		padding-top: 5px;
		border-bottom: 2px dashed #F6F6F6;
		height: 60px;
		line-height: 50px;
		font-weight: 400;
		color: #2A2A2A;
		font-size: 18px;
	}

	.gwcontent {
		padding: 10px 0px 20px 0px;
		height: auto;
		overflow: hidden;
	}
	
	
	/* 上一篇,下一篇样式 */
	.recruitmentInformation .newsOtherTitle {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		cursor: pointer;
		font-size: 16px;
		text-decoration: underline;
		height: 70px;
		line-height: 100px;
	}
		
	.recruitmentInformation .noOtherTitle {
		color: #999;
		text-decoration: none;
		opacity: 0.6;
		height: 70px;
		line-height: 100px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		cursor: pointer;
		font-size: 16px;
	}
		
	.recruitmentInformation .newsOtherTitle:hover {
		color: #0484D7;
	}
		
	.recruitmentInformation .newsOtherTitle.textAlignLeft,
	.recruitmentInformation .noOtherTitle.textAlignLeft {
		text-align: left;
		position: absolute;
		left: -40px;
		bottom: 0px;
		width: 30%;
	}
		
	.recruitmentInformation .newsOtherTitle.textAlignRight,
	.recruitmentInformation .noOtherTitle.textAlignRight {
		text-align: right;
		position: absolute;
		right: -40px;
		bottom: 0px;
		width: 30%;
	}
		
	.recruitmentInformation .pageupOrNext {
		display: flex;
		position: relative;
		height: 70px;
	}
	/* 上一篇,下一篇样式----End */
	@media (max-width: 440px) {
		.recruitmentInformation .pageupOrNext {
			flex-direction: column;
			height: max-content;
		}
	
		.recruitmentInformation .newsOtherTitle {
			line-height: 70px;
		}
		.recruitmentInformation .noOtherTitle.textAlignRight,
		.recruitmentInformation .noOtherTitle.textAlignLeft,
		.recruitmentInformation .newsOtherTitle.textAlignLeft,
		.recruitmentInformation .newsOtherTitle.textAlignRight {
			right: 0px;
			position: unset;
			width: 100%;
			text-align: center;
		}
		
		 
	}
</style>
